<template>
  <div class="menu">
    <Back />
    <div class="box1">
      <ul v-for="(item, i) in list2" :key="i">
        <h2>{{ item.name }}</h2>
        <span>{{ item.total }}</span>
        <div class="box2">
          <li
            @click="change(item1.name, item1.innerid, item1.courseid)"
            v-for="item1 in item.inner"
            :key="item1.innerid"
          >
            <i :class="item1.icon"></i>
            <span>{{ item1.name }}</span>
            <b>{{ item1.hot ? "🔥" : "" }}</b>
          </li>
        </div>
      </ul>
    </div>
    <Top class="sdfjklfajl" />
  </div>
</template>

<script>
import { menuall, menuclick } from "@/api";
export default {
  created() {
    menuall().then((res) => {
      this.list2 = res.data;
    });
  },
  methods: {
    change(name, id, courseid) {
      this.name = name;
      this.menuclick(id);
      this.$router.push({
        // http://localhost:8080/#/lesdetail?courseId=1
        path: "/lesdetail?courseId=" + courseid,
      });
    },
    menuclick(i) {
      let id = i;
      // 点击后点击量加1
      menuclick({ id }).then((res) => {
      });
    },
  },
  data() {
    return {
      name: "",
      list2: [],
    };
  },
};
</script>

<style scoped lang="scss">
.menu {
  width: 100vw;
  font-size: 30px;
  margin-bottom: 3vh;
  > a {
    width: 2.4rem;
    height: 2.4rem;
    position: fixed;
    top: 44rem;
    right: 0.2rem;
    display: none;
  }

  > .box {
    display: flex;
    // overflow: hidden;
    overflow-x: scroll;
    > ul {
      height: 5vh;
      border: 1px solid red;
      width: 10vw;
      line-height: 5vh;
      background: yellow;
      > li {
      }
    }
  }
  > .box1 {
    > ul {
      position: relative;
      > h2 {
        padding-left: 5vw;
        height: 6vh;
        line-height: 6vh;
        text-indent: 6vw;
        background: rgba(90, 90, 90, 0.1);
        width: 100%;
      }
      > span {
        position: absolute;
        right: 0vw;
        top: 2.2vh;
        display: block;
        width: 4vw;
        text-align: center;
        height: 4vw;
        line-height: 4vw;
        border-radius: 50%;
        background: red;
        color: #fff;
      }
      > .box2 {
        display: flex;
        flex-wrap: wrap;
        > li {
          position: relative;
          height: 10vh;
          text-align: center;
          margin-left: 10vw;
          width: 20vw;
          > b {
            color: red;
            top: 2vw;
            font-size: 24px;
            right: 0;
            position: absolute;
          }
          > i {
            margin-top: 2vh;
            color: blue;
            margin-bottom: 1vh;
            font-size: 60px;
            display: block;
          }
          > span {
          }
        }
      }
    }
  }
}
</style>